<!-- 图片列表 -->
<template>
 <div class="image-list">
    <div class="action-head">
      <el-radio-group v-model="collect" size="mini" @change="loadImages(1)">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button type="success" size="mini" @click="dialogUploadVisible = true" v-if="isShowAdd">上传素材</el-button>
    </div>
    <el-row :gutter="10">
      <el-col :xs="12" :sm="6" :md="6" :lg="4" v-for="(img, index) in images" :key = "index" class="image-item" @click.native="selected = index">
        <el-image
          style="height: 100px"
          :src="img.url"
          fit="cover"
          >
          <!-- :preview-src-list="[img.url]" 加上这句能通过点击图片大图预览-->
        </el-image>
        <div class="selected" v-if="isShowSelected && selected === index"></div>
        <div class="image-action" v-if="isShowAction">
          <el-button
            type="warning"
            circle
            size="mini"
            :icon="img.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'"
            :loading="img.loading"
            @click="onCollent(img)"
          >
          </el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini" :loading="img.loading" @click="onDelete(img)"></el-button>
        </div>
      </el-col>
    </el-row>
    <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="totalCount"
    :page-size="pageSize"
    :disabled="pageLoading"
    :current-page.sync="page"
    @current-change="onCurrentChange"
      />
    <el-dialog title="上传素材" :visible.sync="dialogUploadVisible" :append-to-body="true" width="400px">
      <el-upload
        class="upload-demo"
        drag
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        multiple
        :headers="uploadHeaders"
        name="image"
        :show-file-list="false"
        :on-success="onUploadSuccess"
        >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
 </div>
</template>

<script>
import { getImages, collectImages, deleteImages } from '@/api/image'
export default {
  name: 'ImageList',
  components: {},
  props: {
    isShowAdd: {
      type: Boolean,
      default: true
    },
    isShowAction: {
      type: Boolean,
      default: true
    },
    isShowSelected: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const user = JSON.parse(window.localStorage.getItem('user'))
    return {
      collect: false, // 默认查询全部
      images: [], // 图片素材列表
      dialogUploadVisible: false,
      uploadHeaders: {
        Authorization: `Bearer ${user.token}`
      },
      totalCount: 0, // 总数据条数
      pageSize: 20, // 每页大小
      page: 1, // 当前页码
      pageLoading: true,
      selected: null
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadImages(1)
  },
  mounted () {},
  methods: {
    loadImages (page = 1) {
      this.pageLoading = true
      // 重置高亮页码，防止数据和页码不对应,切换到收藏的时候页码回到第1页
      this.page = page
      getImages({
        collect: this.collect,
        page,
        per_page: this.pageSize
      }).then(res => {
        const results = res.data.data.results
        results.forEach(img => {
          // 在接收到的数据img对象中手动添加loading状态来控制每个收藏按钮
          img.loading = false
        })
        this.images = results
        this.totalCount = res.data.data.total_count
        this.pageLoading = false
      })
    },
    // onCollectChange () {
    //   this.loadImages(1)
    // },
    onUploadSuccess () {
      // 关闭对话框
      this.dialogUploadVisible = false
      // 更新素材列表
      this.loadImages(this.page)
      this.$message({
        type: 'success',
        message: '上传成功'
      })
    },
    onCurrentChange (page) {
      this.loadImages(page)
    },
    onCollent (img) {
      collectImages(img.id, !img.is_collected).then(res => {
        // 更新视图状态
        img.is_collected = !img.is_collected
        img.loading = false
        // 关闭 loading
      })
    },
    onDelete (img) {
      img.loading = true
      deleteImages(img.id).then((res) => {
        // 重新加载数据列表
        this.loadImages(this.page)
        img.loading = false
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    }
  }
}

</script>

<style lang='less' scoped>
.action-head{
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.image-item{
  position: relative;
}
.image-action{
  position:absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  background-color:rgba(204, 204, 204,0.6);
  height:30px;
  line-height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  /deep/ .el-button--mini.is-circle{
    padding: 5px;
  }
}
.selected{
  width: 50px;
  height: 50px;
  background:url(./selected.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
